<!-- 操作按钮 -->
<template>
    <div class="tableHead" :class="{'isHaveMargin': props.flagIndex != 'detail'}">
        <!-- 操作按钮 -->
        <div class="btn" v-show="props.flagIndex != 'detail'">
            <el-button v-for="btn in props.opbutton" :key="btn.dealway" :icon="btn.icon"
                :type="btn.type" @click="opbuttonclick(btn.dealway)"
                :disabled="!(UserMsg.is_superuser || (btn.keyV && permission.includes(btn.keyV) || !btn.disabled))">{{
                btn.label }}</el-button>
        </div>
    </div>
</template>

<script setup>
import { toRefs, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import commonV from '@/common'

onMounted(() => {
    getUserLimits()
})

let props = defineProps({
    opbutton: {
        type: Array,
        default: () => []
    },
    flagIndex: 'create'
})

let emits = defineEmits(['bottonHandle'])

let route = useRoute()

let state = reactive({
    UserMsg: JSON.parse(localStorage.getItem('UserMsg')),
    permission: []
})
let { UserMsg, permission } = toRefs(state)

//点击按钮
let opbuttonclick = (dealway) => {
    emits('bottonHandle', dealway)
}

//获取用户权限
let getUserLimits = async () => {
    state.permission = await commonV.getcurrenUserPermissionasync(route.path, 1)
}

</script>

<style lang="scss" scoped>
.tableHead {
    margin-bottom: 0;
}

.isHaveMargin {
    margin-bottom: 20px;
}
</style>